<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>FormData</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Content-Language" content="zh-CN" />
    <style type="text/css">
        #feedback{width:1200px;margin:0 auto;}
        #feedback img{float:left;width:300px;height:300px;}
    </style>
    <script type="text/javascript" src="jquery-1.11.3.js"></script>
</head>
<body>

<div>
    <!-- 点击图片添加文件方式 -->
    <img src="" onclick="getElementById('up_img').click()" title="点击添加图片" alt="点击添加图片">
    <input type="file" name="file_name" style="opacity:0;filter:alpha(opacity=0);" id="up_img"/>
</div>
<div id="feedback"></div>    <!-- 响应返回数据容器 -->
<script type="text/javascript">
    $(document).ready(function(){
        $("#up_img").change(function(){
            //创建FormData对象
            var data = new FormData();
            //为FormData对象添加数据
            //
            $.each($('#up_img')[0].files, function(i, file) {
                data.append('file_name', file);
            });
            $.ajax({
                url:'submit_form_process.php',
                type:'POST',
                data:data,
                cache: false,
                contentType: false,    //不可缺
                processData: false,    //不可缺
                success:function(data){
                    data = $(data).html();
                    if($("#feedback").children('img').length == 0) $("#feedback").append(data.replace(/&lt;/g,'<').replace(/&gt;/g,'>'));
                    else $("#feedback").children('img').eq(0).before(data.replace(/&lt;/g,'<').replace(/&gt;/g,'>'));
                }
            });
        });
    });
</script>
</body>
</html>